<script setup lang="ts">
import type { PersonCardProps } from '../types/PersonCardProps';

const props = defineProps<PersonCardProps>();
const { avatar, name, department, role, img } = props;
</script>

<template>
  <div
    style="display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    border-radius: 1rem;
    border-style: dashed;
    border-width: 0.1rem;
    border-color: grey;
    padding: 0.5rem;
    background-color: rgb(249,250,252);"
  >
    <a-avatar :src="avatar" :alt="name" style="height: 10rem; width: 10rem;" />

    <div style="min-width: 2rem;" />

    <div style="display: flex; flex-direction: column;">
      <div style="text-align: center; font-size: 1.5rem; font-weight: bold;">
        {{ name }}
      </div>

      <div style="text-align: center; font-size: 1rem; font-weight: bold;">
        {{ department }}
      </div>

      <img :src="img" alt="Role Icon">
      <div style="text-align: center; font-size: 1rem; font-weight: bold;">
        {{ role }}
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
